<script>
/**
 * @desc 每一天的收支情况
 * @prop {Array} list 一天的记录列表
 * @prop {Number} type 显示类型 0=所有 1=收入 2=支出
 */

import BillItem from '@/components/bill-item'
import { dateFormate } from '@/utils'

export default {
  name: 'day-bill-list',
  props: { list: Array, type: Number },
  components: { BillItem },
  computed: {
    formateList() {
      return this.type
        ? this.list.filter(v => v.type === this.type - 1)
        : this.list
    },
    dateText() {
      return dateFormate(this.list[0].date, 'mmm月ddd日 星期www')
    },
    totalIncome() {
      return this.list.reduce((pre, curr) => {
        return pre + (!curr.type ? curr.money : 0)
      }, 0)
    },
    totalExpenditure() {
      return this.list.reduce((pre, curr) => {
        return pre + (curr.type ? curr.money : 0)
      }, 0)
    },
    moneyInfo() {
      if (!this.type) {
        return `收入: ${this.totalIncome} 支出: ${this.totalExpenditure}`
      } else {
        return this.type === 1
          ? `收入: ${this.totalIncome}`
          : `支出: ${this.totalExpenditure}`
      }
    }
  }
}
</script>

<template v-if="formateList.length">
  <div :class="$sty.container">
    <div :class="$sty.infoBar">
      <p :class="$sty.date">{{dateText}}</p>
      <p :class="$sty.moneyInfo">{{moneyInfo}}</p>
    </div>

    <bill-item
      :data="v"
      :key="i"
      v-for="(v,i) in formateList"
    />
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
